<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/montage-serialization">
        {
            "owner": {
                "values": {
                    "element": {"#": "main"}
                }
            },

            "custom": {
                "prototype": "montage/ui/checkbox.reel",
                "values": {
                    "element": {"#": "checkbox-custom"}
                }
            },

            "native": {
                "prototype": "montage/ui/checkbox.reel",
                "values": {
                    "element": {"#": "checkbox-native"}
                }
            }
        }
    </script>

</head>
<body>
    <div data-montage-id="main" class="Main">
        <header>CheckBox Sample</header>
        <section class="checkboxes">
            <span data-montage-id="checkbox-custom" class="checkbox custom">
                <svg viewBox="0 0 22 22">
                    <path class="CheckboxCustom-icon" d="M16.7134505,5.23925421 L17.8369808,6.36278454 C18.1579559,6.68375963 18.155261,7.18928629 17.8417994,7.50274785 L9.90369523,15.4408521 C9.58826333,15.756284 9.07985473,15.7521563 8.76373192,15.4360335 L7.6402016,14.3125031 C7.63973757,14.3120391 7.63927421,14.3115747 7.63896013,14.3112519 C7.63816313,14.3104614 7.63736736,14.3096689 7.63657284,14.3088744 L4.23073621,10.9030377 C3.92224924,10.5945508 3.92161045,10.0813757 4.23773325,9.76525291 L5.36126357,8.64172251 C5.68223867,8.32074751 6.18679,8.32246711 6.49904844,8.63472551 L9.33612283,11.4717999 L15.5734872,5.23443561 C15.8889191,4.91900366 16.3973277,4.92313142 16.7134505,5.23925421 C16.7134505,5.23925421 16.3973277,4.92313142 16.7134505,5.23925421 L16.7134505,5.23925421 L16.7134505,5.23925421 Z"></path>
                </svg>
            </span>

            <input type="checkbox" data-montage-id="checkbox-native" class="checkbox native" />
            <span data-montage-id="text"></span>
        </section>
    </div>
</body>
</html>
